<!--用户管理-->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="searchForm.loginName" clearable>
              <template slot="prepend">手机号</template>
            </el-input>
          </el-col>
          <el-col :span="12">
            <el-input v-model="searchForm.name" clearable>
              <template slot="prepend">姓名</template>
            </el-input>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-button plain type="info" @click="fetchData">查询</el-button>
        <el-button plain type="primary" @click="handleBack">清空</el-button>
      </el-col>
      <el-col :span="3">
        <el-button plain type="success" @click="handleAdd()">新增</el-button>
      </el-col>
    </el-row>
    <el-col :span="20">
      <div style="margin-top:2.5vh">
        <el-table stripe border v-loading="loading" :data="items">
          <el-table-column
            v-for="(item, index) in tableCols"
            :key="index"
            :prop="item.colKey"
            :label="item.label"
            :min-width="item['min-width']"
            :align="item.align"
          ></el-table-column>
          <el-table-column label="操作" min-width="260" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button plain type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button plain type="danger" @click="handleDeleteData(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- <Pagination ref="pagination" :total="totalCount" @fetchAllData="fetchMethod" /> -->
      </div>
    </el-col>
    <el-dialog :visible.sync="dialogvisble" fullscreen>
      <user-edit :form="form" @closeDialog="fetchData(), dialogvisble = false" /><!--这里；改成了，-->
    </el-dialog>
  </div>
</template>

<script>
import userEdit from "@/pages/sysControl/userManage/userEdit.vue";
// import Pagination from "@/components/Pagination.vue";
export default {
  name: "userManage",
  components: {
    userEdit
  },
  computed: {
    // 根据是否是在搜索中使用不同的查询方法
  },
  data() {
    return {
      form: {
        //更新用户信息接口是否修改密码,默认为true是为了管理创建用户的时候
        loginphone: "",
        userpassword: "",
        userrealname: "",
        userstatus: "",
        roles: ""
      },
      dialogvisble: false,
      currentID: "",
      searchForm: {
        loginName: "", //用户名
        name: "" //姓名
      },
      // 是否正在查找
      isSearch: false,
      // 总数据数量
      totalCount: 0,
      items: [],
      // 表格数据
      tableCols: [
        {
          label: "用户姓名",
          colKey: "userrealname",
          align: "center",
          "min-width": "150"
        },
        {
          label: "用户电话",
          colKey: "loginphone",
          align: "center",
          "min-width": "150"
        },
        {
          label: "用户密码",
          colKey: "userpassword",
          align: "center",
          "min-width": "200"
        },
        {
          label: "角色",
          colKey: "roleNames",
          align: "center",
          "min-width": "200"
        }
      ],
      // 加载状态
      loading: false
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.loading = true;
      await this.$api //调用模糊查询接口
        .post(
          "http://139.9.249.149:8081/judge/user/get",
          {
            loginphone: this.searchForm.loginName,
            userrealname: this.searchForm.name
          },
          { autoAlert: false, returnAll: true }
        )
        .then(res => {
          // console.log(res);
          if (res.code == 200) {
            const msg = res.data.msg;
            this.items = msg;
            //console.log(msg);
            this.items.forEach(item => {
              item.roleNames = item.roleNames.join(",");
            });
            this.loading = false;
          } else {
            this.$message({
              message: res.msg || "获取用户失败",
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "获取用户失败，请稍后重试",
            type: "error"
          });
        });
    },
    handleAdd() {
      this.id = "";
      this.form = {
        loginphone: "",
        userpassword: "",
        userrealname: "",
        userstatus: "",
        roles: [],
        password: "",
        repassword: ""
      };
      this.dialogvisble = true;
    },
    async handleEdit(row) {
      this.currentID = row.userid;
      this.id = this.currentID;
      this.$api
        .get(
          `http://139.9.249.149:8081/judge/user/get?id=${this.currentID}`,
          {},
          { autoAlert: false, returnAll: true }
        )
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            this.form = {
              userid: res.data.msg.user.userid,
              loginphone: res.data.msg.user.loginphone,
              userpassword: res.data.msg.user.userpassword,
              userrealname: res.data.msg.user.userrealname,
              userstatus: res.data.msg.user.userstatus,
              roles:
                res.data.msg.roles === "暂无对应角色" ? [] : res.data.msg.roles,
              password: "",
              repassword: ""
            };
            console.log(this.form);
            this.dialogvisble = true;
          }
        });
    },

    // 返回
    handleBack() {
      this.isSearch = false;
      this.searchForm.name = "";
      this.searchForm.loginName = "";
      this.fetchData();
    },
    handleDeleteData(row) {
      this.$confirm(`确定删除用户${row.userrealname}？`, "提示", {
        type: "warning"
      }).then(async () => {
        this.currentID = row.userid;
        await this.$api
          .delete(`http://139.9.249.149:8081/judge/user?id=${this.currentID}`)
          .then(res => {
            if (res.code == 200) {
              this.fetchData();
            }
          });
      });
    }
  }
};
</script>

<style>
</style>
